<template>
  <page-dialog
    :title="dialogInfo.title"
    v-model:visible="showDialog"
    :width="dialogInfo.width"
    :bt-list="dialogInfo.btList"
  >
    <div class="model-panel">
      <div class="model-panel-body">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="表格显示设置" name="showLevel">
            <el-row class="set-preference-wrap">
              <el-col :span="6">
                <el-button
                  style="marginbottom: 5px; marginleft: 5px"
                  :disabled="!fieldList1.length"
                  @click="rightMove('showLevel')"
                  >一键右移</el-button
                >
                <div class="set-preference-item margin-right">
                  <div class="draggable-wrap-item background-color">未选</div>
                  <draggable
                    class="draggable-wrap"
                    v-model="fieldList1"
                    dragable="true"
                    element="ul"
                    group="fieldSite"
                    @add="fieldAddshow1"
                    :options="{
                      scroll: true,
                      animation: 300,
                    }"
                  >
                    <div
                      class="draggable-wrap-item"
                      v-for="(item, index) in fieldList1"
                      :key="Math.random() + index"
                    >
                      {{ item.label }}
                    </div>
                  </draggable>
                </div>
              </el-col>
              <el-col :span="17">
                <el-button
                  style="marginbottom: 5px; marginleft: 5px"
                  :disabled="!fieldList2.length"
                  @click="leftMove('showLevel')"
                  >一键左移</el-button
                >
                <div class="set-preference-item">
                  <div class="draggable-wrap-item background-color">
                    <span>已选</span>
                    <span style="marginright: 100px">操作</span>
                  </div>
                  <draggable
                    class="draggable-wrap"
                    v-model="fieldList2"
                    dragable="true"
                    group="fieldSite"
                    @add="fieldAddshow2"
                    @update="datadragFieldEnd2"
                    :options="{
                      scroll: true,
                      animation: 300,
                    }"
                  >
                    <div
                      class="draggable-wrap-item"
                      v-for="(item, index) in fieldList2"
                      :key="Math.random() + index"
                    >
                      <span> {{ item.label }}</span>
                      <span
                        style="marginright: 100px"
                        class="slip-edit"
                        @click="setTop(item, fieldList2, 'showLevel')"
                      >
                        {{ index ? '置顶' : '' }}
                      </span>
                    </div>
                  </draggable>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane
            label="表格分组设置"
            v-if="groupLevelShow"
            name="groupLevel"
          >
            <el-row class="set-preference-wrap">
              <el-col :span="6">
                <el-button
                  style="marginbottom: 5px; marginleft: 5px"
                  :disabled="!fieldList1.length"
                  @click="rightMove('groupLevel')"
                  >一键右移</el-button
                >
                <div class="set-preference-item margin-right">
                  <div class="draggable-wrap-item background-color">未选</div>
                  <draggable
                    class="draggable-wrap"
                    v-model="fieldList1"
                    dragable="true"
                    group="fieldSite"
                    @add="fieldAddGroup1"
                    :options="{
                      scroll: true,
                      animation: 300,
                    }"
                  >
                    <div
                      class="draggable-wrap-item"
                      v-for="(item, index) in fieldList1"
                      :key="Math.random() + index"
                    >
                      {{ item.label }}
                    </div>
                  </draggable>
                </div>
              </el-col>
              <el-col :span="17">
                <el-button
                  style="marginbottom: 5px; marginleft: 5px"
                  :disabled="!fieldList2.length"
                  @click="leftMove('groupLevel')"
                  >一键左移</el-button
                >
                <div class="set-preference-item">
                  <div class="draggable-wrap-item background-color">
                    <span>已选</span>
                    <span style="marginright: 100px">操作</span>
                  </div>
                  <draggable
                    class="draggable-wrap"
                    v-model="fieldList2"
                    dragable="true"
                    group="fieldSite"
                    @add="fieldAddGroup2"
                    @update="datadragFieldEnd3"
                    :options="{
                      scroll: true,
                      animation: 300,
                    }"
                  >
                    <div
                      class="draggable-wrap-item"
                      v-for="(item, index) in fieldList2"
                      :key="Math.random() + index"
                    >
                      <span> {{ item.label }}</span>
                      <span
                        style="marginright: 100px"
                        class="slip-edit"
                        @click="setTop(item, fieldList2, 'groupLevel')"
                      >
                        {{ index ? '置顶' : '' }}
                      </span>
                    </div>
                  </draggable>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane name="sortLevel">
            <div slot="label" style="display: flex">
              <span class="margin-right">表格排序设置</span>
            </div>
            <el-row class="set-preference-wrap">
              <el-col :span="6">
                <el-button
                  style="marginbottom: 5px; marginleft: 5px"
                  :disabled="!fieldList1.length"
                  @click="rightMove('sortLevel')"
                  >一键右移</el-button
                >
                <div class="set-preference-item margin-right">
                  <div class="draggable-wrap-item background-color">未选</div>
                  <draggable
                    class="draggable-wrap"
                    v-model="fieldList1"
                    dragable="true"
                    group="fieldSite"
                    @add="fieldAddSort1"
                    :options="{
                      scroll: true,
                      animation: 300,
                    }"
                  >
                    <div
                      class="draggable-wrap-item"
                      v-for="(item, index) in fieldList1"
                      :key="Math.random() + index"
                    >
                      {{ item.label }}
                    </div>
                  </draggable>
                </div>
              </el-col>
              <el-col :span="17">
                <el-button
                  style="marginbottom: 5px; marginleft: 5px"
                  :disabled="!fieldList2.length"
                  @click="leftMove('sortLevel')"
                  >一键左移</el-button
                >
                <div class="set-preference-item">
                  <div class="draggable-wrap-item background-color">
                    <span>已选</span>
                    <span style="marginright: 100px">操作</span>
                  </div>
                  <draggable
                    class="draggable-wrap"
                    v-model="fieldList2"
                    dragable="true"
                    group="fieldSite"
                    @add="fieldAddSort2"
                    @update="datadragFieldEnd4"
                    :options="{
                      scroll: true,
                      animation: 300,
                    }"
                  >
                    <div
                      class="draggable-wrap-item"
                      v-for="(item, index) in fieldList2"
                      :key="Math.random() + index"
                    >
                      <span>{{ item.label }}</span>
                      <span
                        style="marginright: 100px"
                        class="slip-edit"
                        @click="changeSort(item.sortControllerType, index)"
                      >
                        {{
                          item.sortControllerType === 1
                            ? '升序'
                            : item.sortControllerType === 2
                            ? '降序'
                            : ''
                        }}
                      </span>
                    </div>
                  </draggable>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </page-dialog>
</template>
<script setup name="ConsumeSetPreference">
import draggable from 'vuedraggable'
const { proxy } = getCurrentInstance()
const props = defineProps({
  visible: {
    type: Boolean,
  },
  searchList: {
    type: Array,
    default: function () {
      return []
    },
  },
  fieldList: {
    type: Array,
    default: function () {
      return []
    },
  },
  customizeUserVO: {
    type: Object,
    default: function () {
      return {}
    },
  },
  groupLevelShow: {
    type: Boolean,
    default: false,
  },
})

const activeName = ref('showLevel')
const dialogInfo = ref({
  title: '偏好设置',
  width: '800px',
  btLoading: false,
  btList: [
    { label: '关闭', event: handleClose, show: true },
    {
      label: '保存',
      type: 'primary',
      disabled: false,
      event: save,
      show: true,
    },
  ],
})
const searchList1 = ref([])
const searchList2 = ref([])
const fieldList1 = ref([])
const fieldList2 = ref([])
const newFieldList = ref([])
const newCustomizeUserVO = ref({})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    proxy.$emit('update:visible', newValue) // 更新父组件shows
  },
})

setData()
function setData() {
  newCustomizeUserVO.value = JSON.parse(JSON.stringify(props.customizeUserVO))
  newFieldList.value = proxy.$fn.deepClone(props.fieldList)
  if (newFieldList.value.length) {
    fieldList1.value = newFieldList.value.filter((item) => item.showLevel === 0)
    newFieldList.value.sort(compare('showLevel'))
    fieldList2.value = newFieldList.value.filter((item) => item.showLevel > 0)
  }
}
function setTop(row, arr, str) {
  //置顶
  arr = arr.filter((item) => item !== row)
  switch (str) {
    case 'queryLevel':
      arr.unshift(row)
      arr.forEach((item, index) => {
        item.searchLevel = index + 1
      })
      searchList2.value = arr
      break
    case 'showLevel':
      arr.unshift(row)
      arr.forEach((item, index) => {
        item.showLevel = index + 1
      })
      fieldList2.value = arr
      break
    case 'groupLevel':
      arr.unshift(row)
      arr.forEach((item, index) => {
        item.groupLevel = index + 1
      })
      fieldList2.value = arr
      break
  }
}
function rightMove(str) {
  //右移
  switch (str) {
    case 'queryLevel':
      searchList2.value = searchList2.value.concat(searchList1.value)
      searchList2.value.forEach((item, index) => {
        item.show = true
        item.searchLevel = index + 1
      })
      searchList1.value = []
      break
    case 'showLevel':
      fieldList2.value = fieldList2.value.concat(fieldList1.value)
      fieldList2.value.forEach((item, index) => {
        item.hidden = false
        item.showLevel = index + 1
      })
      fieldList1.value = []
      break
    case 'groupLevel':
      fieldList2.value = fieldList2.value.concat(fieldList1.value)
      fieldList2.value.forEach((item, index) => {
        item.groupLevel = index + 1
      })
      fieldList1.value = []
      break
    case 'sortLevel':
      fieldList2.value = fieldList2.value.concat(fieldList1.value)
      fieldList2.value.forEach((item, index) => {
        item.sortable = true
        item.sortControllerType = 1
        item.sortLevel = index + 1
      })
      fieldList1.value = []
      break
  }
}
function leftMove(str) {
  //左移
  switch (str) {
    case 'queryLevel':
      searchList1.value = searchList1.value.concat(searchList2.value)
      searchList1.value.forEach((item) => {
        item.show = false
        item.searchLevel = 0
      })
      searchList2.value = []
      break
    case 'showLevel':
      fieldList1.value = fieldList1.value.concat(fieldList2.value)
      fieldList1.value.forEach((item) => {
        item.hidden = true
        item.showLevel = 0
      })
      fieldList2.value = []
      break
    case 'groupLevel':
      fieldList1.value = fieldList1.value.concat(fieldList2.value)
      fieldList1.value.forEach((item) => {
        item.groupLevel = 0
      })
      fieldList2.value = []
      break
    case 'sortLevel':
      fieldList1.value = fieldList1.value.concat(fieldList2.value)
      fieldList1.value.forEach((item) => {
        item.sortable = false
        item.sortControllerType = 0
        item.sortLevel = 0
      })
      fieldList2.value = []
      break
  }
}
function handleClose() {
  showDialog.value = false
}
function save() {
  let customizeUserVO = newCustomizeUserVO.value
  let _searchList = searchList2.value.concat(searchList1.value)
  let fieldList = newFieldList.value
  _searchList.forEach((item) => {
    if (Object.keys(customizeUserVO.detail).includes(item.value)) {
      customizeUserVO.detail[item.value].searchLevel = item.searchLevel
    }
  })
  fieldList.forEach((item) => {
    if (Object.keys(customizeUserVO.detail).includes(item.value)) {
      customizeUserVO.detail[item.value].showLevel = item.showLevel
      customizeUserVO.detail[item.value].sortControllerType =
        item.sortControllerType
      customizeUserVO.detail[item.value].sortLevel = item.sortLevel
    }
  })
  proxy.$emit('callback', {
    searchList: _searchList,
    fieldList: fieldList,
    customizeUserVO: customizeUserVO,
  })
  handleClose()
}
function compare(property) {
  return function (a, b) {
    return a[property] - b[property]
  }
}
function handleClick() {
  let fieldList = newFieldList.value
  if (activeName.value === 'showLevel') {
    fieldList1.value = fieldList.filter((item) => item.showLevel === 0)
    fieldList.sort(compare('showLevel'))
    fieldList2.value = fieldList.filter((item) => item.showLevel > 0)
  } else if (activeName.value === 'sortLevel') {
    fieldList.sort(compare('showLevel'))
    fieldList1.value = fieldList.filter(
      (item) => item.sortControllerType === 0 && item.showLevel > 0
    )
    fieldList2.value = fieldList.filter(
      (item) => item.sortControllerType > 0 && item.showLevel > 0
    )
  } else if (activeName.value === 'groupLevel') {
    fieldList1.value = fieldList.filter(
      (item) => item.groupLevel === 0 && item.showLevel > 0
    )
    fieldList2.value = fieldList.filter(
      (item) => item.groupLevel > 0 && item.showLevel > 0
    )
  }
}
function changeSort(num, index) {
  if (num === 1) {
    fieldList2.value[index].sortControllerType = 2
  } else if (num === 2) {
    fieldList2.value[index].sortControllerType = 1
  }
}
//查询
function add1(e) {
  searchList1.value.forEach((item) => {
    item.show = false
    item.searchLevel = 0
  })
}
function add2(e) {
  searchList2.value.forEach((item, index) => {
    item.show = true
    item.searchLevel = index + 1
  })
}
function datadragSearchEnd2() {
  searchList2.value.forEach((item, index) => {
    item.searchLevel = index + 1
  })
}
//显示
function fieldAddshow1() {
  fieldList1.value.forEach((item) => {
    item.hidden = true
    item.showLevel = 0
  })
}
function fieldAddshow2() {
  fieldList2.value.forEach((item, index) => {
    item.hidden = false
    item.showLevel = index + 1
  })
}
function datadragFieldEnd2() {
  fieldList2.value.forEach((item, index) => {
    item.showLevel = index + 1
  })
}
//分组
function fieldAddGroup1() {
  fieldList1.value.forEach((item) => {
    item.groupLevel = 0
  })
}
function fieldAddGroup2() {
  fieldList2.value.forEach((item, index) => {
    item.groupLevel = index + 1
  })
}
function datadragFieldEnd3() {
  fieldList2.value.forEach((item, index) => {
    item.groupLevel = index + 1
  })
}
//排序
function fieldAddSort1(e) {
  fieldList1.value.forEach((item) => {
    item.sortable = false
    item.sortControllerType = 0
    item.sortLevel = 0
  })
}
function fieldAddSort2(e) {
  let newIndex = e.newIndex
  fieldList2.value.forEach((item, index) => {
    item.sortable = true
    item.sortControllerType = newIndex === index ? 1 : item.sortControllerType
    item.sortLevel = index + 1
  })
}
function datadragFieldEnd4(e) {
  fieldList2.value.forEach((item, index) => {
    item.sortLevel = index + 1
  })
}
function choose1(evt) {
  // const ITEM_HEIGHT = 153;
  const ITEM_HEIGHT = evt.item.offsetHeight
  let container = evt.path[1]
  let index = evt.oldIndex

  if (index * ITEM_HEIGHT < container.scrollTop) {
    container.scrollTo({
      top: index * ITEM_HEIGHT,
    })
  } else if (
    (index + 1) * ITEM_HEIGHT >
    container.scrollTop + container.offsetHeight
  ) {
    container.scrollTo({
      top: (index + 1) * ITEM_HEIGHT - container.offsetHeight,
    })
  }
}
function choose2(evt) {
  // const ITEM_HEIGHT = 153;
  const ITEM_HEIGHT = evt.item.offsetHeight
  let container = evt.path[1]
  let index = evt.oldIndex

  if (index * ITEM_HEIGHT < container.scrollTop) {
    container.scrollTo({
      top: index * ITEM_HEIGHT,
    })
  } else if (
    (index + 1) * ITEM_HEIGHT >
    container.scrollTop + container.offsetHeight
  ) {
    container.scrollTo({
      top: (index + 1) * ITEM_HEIGHT - container.offsetHeight,
    })
  }
}
</script>
<style scoped lang="scss">
.set-preference-wrap {
  padding: 5px 0;
  box-sizing: border-box;
  .set-preference-item {
    border: 1px solid #dae2ea;
    height: 300px;
    overflow: hidden;
    overflow-y: scroll;
  }
}
.draggable-wrap {
  height: 100%;
  .draggable-wrap-group {
    height: 100%;
    width: 100%;
    display: inline-block;
  }
}
.draggable-wrap-item {
  height: 30px;
  width: 100%;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #dae2ea;
  padding: 0 5px;
  box-sizing: border-box;
  color: #606266;
  font-size: 14px;
}
.background-color {
  background: #dfdfdf;
  border-top: 0;
  color: #909399;
  font-weight: 600;
}
.margin-right {
  margin-right: 10px;
}
</style>
